<template>
	<view class="home" >
		<view class="home-search" :class="scrollTop >= 150 ? 'down' : 'up'">
			<HomeSearch v-if="isSearch"></HomeSearch>
		</view>

		<view class="home-header">
			<HomeHeader></HomeHeader>
		</view>

		<view class="home-monitor">
			<HomeMonitor></HomeMonitor>
		</view>

		<view class="home-item">
			<HomeGroupItem class="item" v-for="groupItem in groupList" :key="groupItem.kind" :groupItem="groupItem">
			</HomeGroupItem>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupList: [], //首页三大数据列表
				isSearch: false,
				scrollTop: 0,
			};
		},
		onLoad() {
			uni.request({
				url: 'https://food.boohee.com/fb/v1/categories/list',
				success: (res) => {
					this.groupList = res.data.group;
				}
			})
		},
		mounted() {
			//#ifndef MP
			window.addEventListener("scroll", this.scrollToTop);
			//#endif
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop >= 150) {
				this.isSearch = true;
			} else {
				this.isSearch = false;
			}
		},
		methods: {
			scrollToTop() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				this.scrollTop = scrollTop;
				if (scrollTop >= 150) {
					this.isSearch = true;
				} else {
					this.isSearch = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.down {
			transform: translateY(0);
		}

		.up {
			transform: translateY(-100px);
		}

		.home-search {
			position: sticky;
			left: 0;
			top: 0;
			z-index: 2;
			transition: all 0.5s;
		}

		&::after {
			content: "";
			display: block;
			clear: both;
		}
	}
</style>
